<template>
	<view class="add-member-container">
		<view class="form">
			<!-- 姓名输入 -->
			<view class="form-item">
				<view class="label">
					<text class="required">*</text>
					<text>姓名</text>
				</view>
				<input type="text" v-model="state.formData.family_person_name" placeholder="请输入真实姓名"
					placeholder-class="placeholder" />
			</view>

			<!-- 手机号输入 -->
			<view class="form-item">
				<view class="label">
					<text class="required">*</text>
					<text>手机号</text>
				</view>
				<input type="number" v-model="state.formData.family_person_phone" placeholder="请输入手机号"
					placeholder-class="placeholder" maxlength="11" />
			</view>

			<!-- 政治面貌选择 -->
			<view class="form-item" @tap="togglePopup('politics')">
				<view class="label">
					<text class="required">*</text>
					<text>政治面貌</text>
				</view>
				<view class="picker">
					<text :class="{ placeholder: !state.formData.family_person_politics }">
						{{ state.formData.family_person_politics || "请选择" }}
					</text>
					<text class="arrow">></text>
				</view>
			</view>

			<view class="form-item">
				<view class="label">
					<text class="required">*</text>
					<text>年龄</text>
				</view>
				<input type="text" v-model="state.formData.age" placeholder="请输入年龄" placeholder-class="placeholder" />
			</view>

			<!-- 家庭关系选择 -->
			<view class="form-item" @tap="togglePopup('relation')">
				<view class="label">
					<text class="required">*</text>
					<text>家庭关系</text>
				</view>
				<view class="picker">
					<text :class="{ placeholder: !state.tempSelection.relation }">
						{{ state.tempSelection.relation || "请选择" }}
					</text>
					<text class="arrow">></text>
				</view>
			</view>
		</view>

		<!-- 提交按钮 -->
		<view class="submit-btn" @tap="submitForm">确认添加</view>

		<!-- 政治面貌选择弹窗 -->
		<uni-popup ref="politicsPopup" type="bottom">
			<view class="popup-content">
				<view class="popup-header">
					<text>选择政治面貌</text>
					<text class="close" @tap="togglePopup('politics', false)">关闭</text>
				</view>
				<view class="popup-list">
					<view class="popup-item" v-for="item in state.politicsList" :key="item.value"
						@tap="selectPolitics(item)">
						{{ item.label }}
					</view>
				</view>
			</view>
		</uni-popup>

		<!-- 家庭关系选择弹窗 -->
		<uni-popup ref="relationPopup" type="bottom">
			<view class="popup-content">
				<view class="popup-header">
					<text>选择家庭关系</text>
					<text class="close" @tap="togglePopup('relation', false)">关闭</text>
				</view>
				<view class="popup-list">
					<view class="popup-item" v-for="item in state.relationList" :key="item.value"
						@tap="selectRelation(item)">
						{{ item.label }}
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script setup>
	import {
		reactive,
		ref
	} from "vue";
	import {
		request
	} from "../../js/util.js";

	const politicsPopup = ref(null);
	const relationPopup = ref(null);

	const state = reactive({
		formData: {
			family_person_name: "",
			family_person_phone: "",
			family_person_politics: "",
			family_person_type: "",
		},
		// 政治面貌选项
		politicsList: [{
				label: "群众",
				value: "群众"
			},
			{
				label: "共青团员",
				value: "共青团员"
			},
			{
				label: "中共党员",
				value: "中共党员"
			},
			{
				label: "民主党派",
				value: "民主党派"
			},
		],
		// 家庭关系选项
		relationList: [{
				label: "本人",
				value: 0
			},
			{
				label: "配偶",
				value: 1
			},
			{
				label: "父母",
				value: 2
			},
			{
				label: "兄弟姐妹",
				value: 3
			},
			{
				label: "祖父母/外祖父母",
				value: 4
			},
			{
				label: "孙子/外孙",
				value: 5
			},
			{
				label: "子女/儿媳",
				value: 6
			},
			{
				label: "其他",
				value: 7
			},
		],
		// 选择器临时值
		tempSelection: {
			politics: "",
			relation: "",
		},
	});

	// 统一处理弹窗
	const togglePopup = (type, isShow = true) => {
		const popup = type === "politics" ? politicsPopup : relationPopup;
		if (isShow) {
			popup.value.open();
		} else {
			popup.value.close();
		}
	};

	// 选择政治面貌
	const selectPolitics = (item) => {
		state.formData.family_person_politics = item.value;
		togglePopup("politics", false);
	};

	// 选择家庭关系
	const selectRelation = (item) => {
		state.formData.family_person_type = item.value;
		state.tempSelection.relation = item.label;
		togglePopup("relation", false);
	};

	// 验证手机号
	const validatePhone = (phone) => {
		const reg = /^1[3-9]\d{9}$/;
		return reg.test(phone);
	};

	// 提交表单
	const submitForm = async () => {
		const userId = uni.getStorageSync("userid");
		console.log("userId :>> ", userId);
		// 表单验证
		if (!state.formData.family_person_name) {
			uni.showToast({
				title: "请输入家庭成员姓名",
				icon: "none",
			});
			return;
		}

		if (
			!state.formData.family_person_phone ||
			!validatePhone(state.formData.family_person_phone)
		) {
			uni.showToast({
				title: "请输入正确的手机号",
				icon: "none",
			});
			return;
		}

		if (!state.formData.family_person_politics) {
			uni.showToast({
				title: "请选择政治面貌",
				icon: "none",
			});
			return;
		}

		if (!state.formData.family_person_type) {
			uni.showToast({
				title: "请选择家庭关系",
				icon: "none",
			});
			return;
		}
		try {
			const userId = uni.getStorageSync("userid");

			let submitData = {
				...state.formData,
				belong_user_id: userId,
			};
			const res = await request("addFamily", submitData);

			if (res.status) {
				uni.showToast({
					title: "添加成功",
					icon: "success",
				});
				setTimeout(() => {
					uni.navigateBack();
				}, 1000);
			} else {
				uni.showToast({
					title: res.data.msg || "添加失败",
					icon: "none",
				});
			}
		} catch (error) {
			console.error("添加家庭成员错误:", error);
			uni.showToast({
				title: "网络异常，请稍后重试",
				icon: "none",
			});
		}
	};
</script>

<style lang="scss">
	.add-member-container {
		padding: 20rpx;
		min-height: 100vh;
		background: #f5f5f5;

		.form {
			background: #fff;
			border-radius: 12rpx;
			padding: 0 30rpx;

			.form-item {
				display: flex;
				align-items: center;
				padding: 30rpx 0;
				border-bottom: 1rpx solid #eee;

				&:last-child {
					border-bottom: none;
				}

				.label {
					width: 180rpx;
					font-size: 28rpx;
					color: #333;
					display: flex;
					align-items: center;

					.required {
						color: #ff5555;
						margin-right: 4rpx;
					}
				}

				input {
					flex: 1;
					font-size: 28rpx;
				}

				.picker {
					flex: 1;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 28rpx;

					.arrow {
						color: #ccc;
					}
				}
			}
		}

		.submit-btn {
			margin: 40rpx 20rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			background: #ff5555;
			color: #fff;
			font-size: 32rpx;
			border-radius: 44rpx;
		}

		.placeholder {
			color: #999;
		}

		.popup-content {
			background: #fff;
			border-radius: 20rpx 20rpx 0 0;
			padding-bottom: env(safe-area-inset-bottom);

			.popup-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx;
				border-bottom: 1rpx solid #eee;
				font-size: 28rpx;

				.close {
					color: #999;
				}
			}

			.popup-list {
				max-height: 60vh;
				overflow-y: auto;

				.popup-item {
					padding: 30rpx;
					text-align: center;
					font-size: 28rpx;
					border-bottom: 1rpx solid #eee;

					&:active {
						background: #f5f5f5;
					}
				}
			}
		}
	}
</style>